<template>
	<el-row class="lib-search-item">
		<div class="content">
			<el-row class="row title">
				<span>{{itemData.fields.BTitle}}</span>
				<i class="el-icon-s-management"></i>
			</el-row>
			<el-row class="row contentText">
				<el-col :span="20">
					<span>索书号：</span>
					<span>{{itemData.fields.BCallNo}}</span>
				</el-col>
				<el-col :span="4" style="text-align: right;">
					<span>中文图书</span>
				</el-col>
			</el-row>
			<el-row class="row contentText">
				<el-col :span="20">
					<span>标准编码：</span>
					<span>{{itemData.fields.BISBN}}</span>
				</el-col>
				<el-col :span="4" style="text-align: right;">
					<span>馆藏：{{itemData.fields.LocalList.fields.FCount}}</span>
				</el-col>
			</el-row>
			<el-row class="row contentText">
				<el-col :span="20">
					<span>出版信息：</span>
					<span>出版信息：{{itemData.fields.BPublish}}<i
							style="width: 5px;display: inline-block;height: 100%;"></i>{{itemData.fields.BPublishDay}}</span>
				</el-col>
				<el-col :span="4" style="text-align: right;">
					<span>可外借：{{wj_num}}</span>
				</el-col>
			</el-row>
			<el-row class="row contentText" style="margin-top: 8px;">
				<el-col :span="20" style="color: #3672fe;cursor: pointer;" >
					<el-link style="color: #3672fe;" @click="btn()">馆藏预览</el-link>
					<i class="el-icon-caret-bottom"></i>
				</el-col>
<!-- 				<el-col :span="4" style="text-align: right;">
					<div :class="['btn', isSelect ? 'select' : 'unselect']">
						<i style="font-size: 17px;" :class="isSelect ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
						<span>{{ isSelect ? '取消' : '收藏' }}</span>
					</div>
				</el-col> -->
			</el-row>
			<el-table :data="data" style="width: 100%" :row-class-name="tableRowClassName" v-show="show">
				<el-table-column prop="fields.AcessNo" label="索书号" width="180">
				</el-table-column>
				<el-table-column prop="fields.Price" label="价格" width="180">
				</el-table-column>
				<el-table-column prop="fields.BarCode" label="条形码" width="180">
				</el-table-column>
				<el-table-column prop="fields.LocalName" label="所属校区——馆藏地址">
				</el-table-column>
				<el-table-column prop="fields.BorryState" label="书刊状态">
				</el-table-column>
			</el-table>
		</div>
	</el-row>
</template>

<script>
	export default {
		name: 'RightListItem',
		data() {
			return {
				isSelect: true,
				data: [],
				wj_num: 0,
				show: false
			}
		},
		props: {
			itemData: {
				type: Object,
				default: () => {
					return {}
				},
				
			},
			in: '',
		},
		mounted() {
			this.data = this.itemData.fields.LocalList.fields.FItems
			this.data.forEach((a, b) => {
				this.wj_num += Number(a.fields.BorryState)
			})
		},
		methods: {
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			btn() {
				
				this.show=!this.show
			}
		},

	}
</script>

<style lang="scss">
	.lib-search-item {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 42px;

		.content {
			border-bottom: 1px solid #1890ff;
			padding-bottom: 26px;

			.row {
				height: 29px;
				line-height: 29px;
			}

			.title {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #4d86f7;

				span {
					margin-right: 18px;
				}
			}

			.contentText {
				font-size: 14px;
				color: #333333;

				span {
					margin-right: 8px;
				}

				.btn {
					user-select: none;
					cursor: pointer;
					display: inline-block;
					width: 73px;
					height: 26px;
					line-height: 26px;
					border-radius: 5px;
					text-align: center;
					transition: 0.1s;

					span {
						margin-left: 5px;
					}
				}

				.unselect {
					color: #f98550;
					border: 1px solid #f98550;

					&:hover {
						color: #fff;
						background-color: #f98550;
					}
				}

				.select {
					color: #fff;
					background-color: #f98550;
					border: 1px solid #f98550;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>
